<template>
  <!-- <el-button type="primary" @click="start">start</el-button> -->
  <div class="wrapper">

  </div>
  <!-- <el-input v-model="text"></el-input>-->
  <!-- <el-button @click="sendText">发送</el-button> -->
</template>

<script setup>
import AvatarPlatform, {
  PlayerEvents,
  SDKEvents,
} from '@/assets/avatar-sdk-web_3.1.1.1011/index'
import { ref } from 'vue'
import { onMounted } from 'vue'
import { watch } from 'vue'
const text = ref('你好')
const model = defineModel()

// 创建实例 (默认使用内置播放 仅支持 xrtc/webrtc)
const avatarPlatform = new AvatarPlatform()
const startRecord = (()=>{
    if(avatarPlatform != null){
    avatarPlatform.recorder.startRecord(0, ()=>{
      console.warn('STOPED RECORDER')
    }, {
      nlp: true,
      avatar_dispatch: {
        interactive_mode: 0//交互模式（追加或打断）
      }
    });
    }else {
      alert("请先实例化SDK")
    }
})
//发送对话
const sendText = () => {
console.log(model.value)
  if (avatarPlatform != null) {
      if (model.value != "") {
          avatarPlatform.writeText(model.value, {
              nlp: false,//是否开启语义理解
              tts: {
                  volume: 100,
              },
          });
      } else if (model.value != "" && this.vc != "") {
          avatarPlatform.writeText(text.value, {
              nlp: false,//是否开启语义理解
              tts: {
                  vcn: '',//变声
                  volume: 100,
              },
          });
      } else {
          alert("内容不许为空");
      }
  } else {
      alert("请先实例化SDK")
  }
}
onMounted(()=>{
start()
})
function start() {
  if (avatarPlatform != null) {
      // 获取token, 也可以提前获取，在上一步设置
      avatarPlatform
          .start({
              //启动虚拟人，将视频流自动填充至class为wrapper的div中，该div必须具备大小
              wrapper: document.querySelector('.wrapper')
          })
          .then(() => {
              console.log('connected &&  stream play successfully')
              // 注意这里仅是流可以播放， 如果是进页面在用户未交互网页时，代码自动连，
              // 第三步骤 player实例 可能收到PlayerEvents.playNotAllowed事件。
              // 您需要交互层面再次用户点击网页 并主动调用 player.resume() 恢复播放！！
              // 原因：受限于浏览器的自动播放策略

          })
          .catch((e) => {
              // 连接或者流失败，会话停止。
              console.error(e.code, e.message, e.name, e.stack)
          })
  } else {
      alert("请先实例化SDK")
  }

}
// 可以选择性 按需 进行相关事件监听
avatarPlatform
  .on(SDKEvents.connected, (initResp) => {
      // 获取到拉流地址
      console.log('sdk event: connected', initResp)
  })
  .on(SDKEvents.stream_start, () => {
      // 引擎侧 首帧 推流开始 （注意：不代表端侧已经开始有画面！）
      console.log('sdk event: stream_start')
  })
  .on(SDKEvents.disconnected, (err) => {
      setLoading(false)
      console.log('sdk event: disconnected')
      if (err) {
          // 因为异常 而导致的断开！ 此处可以进行 提示通知等
          console.error('ws link disconnected because of Error')
          console.error(e.code, e.message, e.name, e.stack)
      }
  })
  .on(SDKEvents.asr, (asrData) => {
      // 监听到语音的识别结果（asr）
      console.log('sdk event: asr', asrData)
  })
  .on(SDKEvents.nlp, (nlpData) => {
      // 监听到大模型语义理解结果（nlp）
      console.log('sdk event: nlp', nlpData)
  })
  .on(SDKEvents.frame_start, (frameData) => {
      //监听到开始说话的推流首帧
      console.log('sdk event: frameBegin', frameData)
  })
  .on(SDKEvents.tts_duration, (sessionData) => {
      //监听到语音合成用时时长。
      console.log('sdk event: duration', sessionData)
  })
  .on(SDKEvents.frame_stop, (frameData) => {
      //监听到结束说话的末尾帧
      console.log('sdk event: frameEnd', frameData)
  })
  .on(SDKEvents.error, (error) => {
      //监听到错误信息
      console.log('sdk event: error', error)
  })
  .on(SDKEvents.action_start, (actionData) => {
      //监听到开始动作的推流首帧
      console.log('sdk event: actionBegin', actionData)
  })
  .on(SDKEvents.action_stop, (actionData) => {
      //监听到结束动作的末尾帧
      console.log('sdk event: actionEnd', actionData)
  })
// 可以选择性 按需 进行相关事件监听
const player = avatarPlatform.player || avatarPlatform.createPlayer()
player
  ?.on(PlayerEvents.play, () => {
      console.log('sdk event: player play')
  })
  .on(PlayerEvents.waiting, () => {
      console.log('sdk event: player waiting')
  })
  .on(PlayerEvents.playing, () => {
      console.log('sdk event: player playing')
  })
  .on(PlayerEvents.playNotAllowed, () => {
      // TODO 由于浏览器限制，如果用户从未对页面进行过交互点击等操作，则无法正常自动播放音视频等
      // 这里需要交互层面引导用户点击屏幕，然后逻辑调用resume 恢复方法
      console.log('sdk event: play not allowed, muted play')
  })

avatarPlatform
  .setApiInfo({
      appId: 'cd33ad43',//（必传）到交互平台-接口服务中获取，appid需要发布后使用
      apiKey: '07207a6a0bce5861ae5ede0349faa6e4',//（必传）到交互平台-接口服务中获取
      apiSecret: 'YTRkZjQzZTQ4MjBiYTZlMjdjYzdmYzlj',//（必传）到交互平台-接口服务中获取
      sceneId: '171486011904364544',//（必传）到交互平台-接口服务中获取，传入“接口服务ID”
      serverUrl: 'wss://avatar.cn-huadong-1.xf-yun.com/v1/interact'//(必传)接口地址
  })
// 设置全局/连接 参数
avatarPlatform
  .setGlobalParams({
      stream: {
          protocol: 'xrtc',//（必传）实时视频协议，支持webrtc/xrtc，其中只有xrtc支持透明背景，需参数alpha传1
          alpha: 1,//是否开启透明背景，0关闭1开始，需配合protocol=xrtc使用
      },
      avatar: {
          avatar_id: '110117005', //（必传）授权的形象资源id，到交互平台-接口服务-形象列表中获取已授权的形象
      },
      tts: {
          vcn: 'x4_yiting', //（必传）授权的声音资源id，到交互平台-接口服务-声音列表中获取已授权的声音
      }
  })

// 监听 model 的变化
watch(model, (newValue, oldValue) => {
if (newValue !== oldValue && newValue !== '') {
  sendText(); // 触发发送逻辑
}
});

</script>

<style scoped>
.wrapper {
  height: 85%;
  width: 100%;
}
</style>